{include file="index/_meta" /}
    <title>商品详情</title>
<style>
    .shop{
        background: #fff;
        margin-top: 10px;
    }
    .goodsInfo{
        background: #fff;
        padding: 10px;
    }
    .goodsInfo p,.shop p{
        margin: .3em 0;
    }
    .content{
        margin-top: 10px;
        background: #fff;
        padding: 10px;
    }
    .content img{
        width: 100%;
    }
</style>
</head>
<body>
    <div id="app">
        <van-nav-bar
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="window.history.back();"
        ></van-nav-bar>


            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in info.carousel" :key="index">
                    <van-image height="150" :src="item" ></van-image>
                </van-swipe-item>
            </van-swipe>

            <div class="goodsInfo">
                <van-row>
                    <van-col span="24"><p style="font-size: 1.2em;">{{info.name}}</p></van-col>
                </van-row>
                <van-row>
                    <van-col span="12"><p style="color: red;"><small>￥</small>{{info.price}}</p></van-col>
                    <van-col span="12"><p style="text-align: right;font-size: 12px;color: #bdbdbd;">库存：{{info.stock}}</p></van-col>
                </van-row>
            </div>

            <div class="content" style="margin-bottom:65px;">
                <div v-html="info.content"></div>
            </div>

            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="chat"></van-goods-action-icon>
                <van-goods-action-button type="warning" text="查看规格" @click="buy"></van-goods-action-button>
                <van-goods-action-button color="linear-gradient(to right,#ff8917,#ff6034)" text="下架" @click="downUp" v-if="info.put_on == 10"></van-goods-action-button>
                <van-goods-action-button color="linear-gradient(to right,#ff8917,#ff6034)" text="上架" @click="downUp" v-if="info.put_on == 20"></van-goods-action-button>
                <van-goods-action-button type="danger" text="编辑" @click="handle"></van-goods-action-button>
            </van-goods-action>

            <!--        sku选择-->
            <van-sku
                    v-model="show"
                    :sku="sku"
                    :goods="{picture:info.img_thumb}"
                    :goods-id="goods_id"
                    :quota="info.limit_buy"
                    :quota-used="info.use_buy"
                    :show-add-cart-btn="no"
                    @buy-clicked="onBuyClicked"
            ></van-sku>

            <van-popup v-model="showCustomer" position="bottom" closeable round>
                <div style="padding: 20px">
                    <p style="text-align: center">点击拨打客服电话</p>
                    <p>技术支持：<a :href="'tel:15563995229'">15563995229</a></p>
                    <p>厂家客服：<a :href="'tel:'+info.shop_phone">{{info.shop_phone}}</a></p>
                </div>
            </van-popup>

            <van-popup v-model="showFrom" position="bottom" closeable round>
                <van-form @submit="onSubmit" style="margin-top: 40px;">
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">微信打款最小金额为1元，如果商品金额小于1元，用户购买之后会自动将金额存储到商家余额，等待满1元后，可直接提现。商品金额大于1元，用户付费购买后将直接到账</p>
                    <van-field
                            v-model="form.name"
                            name="name"
                            clearable
                            label="标题"
                            clickable
                            :rules="[{ required: true, message: '请填写标题' }]"
                    ></van-field>
                    <van-field
                            v-model="form.express"
                            name="express"
                            label="运费"
                            clearable
                            type="number"
                            clickable
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">不填默认包邮</p>
                    <van-field
                            v-model="form.xian_num"
                            name="xian_num"
                            label="限购数量"
                            clearable
                            clickable
                            type="number"
                            placeholder="不填默认不限购"
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">不填默认不限购</p>
                    <van-field
                            v-model="form.xian_total_num"
                            name="xian_total_num"
                            label="总限购数量"
                            clearable
                            clickable
                            type="number"
                            placeholder="不填默认不限购"
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">不填默认不限购</p>
                    <van-field
                            v-model="form.start_time"
                            name="start_time"
                            label="上架时间"
                            clearable
                            clickable
                            type="date"
                    ></van-field>
                    <van-field
                            v-model="form.end_time"
                            name="end_time"
                            label="下架时间"
                            clearable
                            clickable
                            type="date"
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">不填默认一直上架</p>
                    <van-field
                            v-model="form.share_money_min"
                            name="share_money_min"
                            label="最低分享奖励"
                            clearable
                            clickable
                            placeholder="不填默认分享没有奖励"
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">为0默认分享没有奖励</p>
                    <van-field
                            v-model="form.share_money_max"
                            name="share_money_max"
                            label="最高分享奖励"
                            clearable
                            clickable
                            placeholder="不填默认分享没有奖励"
                    ></van-field>
                    <p style="margin: 0;padding: 0 16px;font-size: 12px;color: #ddd">为0默认分享没有奖励</p>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">
                            发布
                        </van-button>
                    </div>
                </van-form>
            </van-popup>


    </div>
<script>
    new Vue({
        el: "#app",
        data(){return{
            goods_id: '{$Think.get.goods_id}',
            info: [],
            goods: [],
            carouselList: [],
            isLoading:false,
            showFrom:false,
            showCustomer:false,
            show:false,
            no:false,
            yes:true,
            sku: {
                tree: [],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [],
                price: '0', // 默认价格（单位元）
                stock_num: 0, // 商品总库存
                collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [],
                hide_stock: false // 是否隐藏剩余库存
            },
            customStepperConfig: {},
            form:{
                end_time: "",
                express: "0",
                price: "0",
                share_money_max: 0,
                share_money_min: 0,
                start_time: "",
                name: "",
                xian_num: 0,
                xian_total_num: 0,
                goods_id: 0,
                id: '',
            },
        }},
        created(){
            // 整个页面的背景色
            document.body.style.backgroundColor="#ddd";
            this.getDetail()
        },
        methods:{
            // 获取商品详情
            getDetail() {
                let that = this

                axios.post("{:url('goods/getGoodsDetail')}", {
                    goods_id: that.goods_id,
                }).then(function (res) {
                    let ret =res.data
                    that.carouselList = ret.data.carousel
                    that.info = ret.data
                    that.sku = ret.data.sku
                    that.form = ret.data
                })
            },
            chat() {
                this.showCustomer = true
            },
            // 购买按钮
            buy() {
                this.show = true
            },
            // 上拉刷新
            onRefresh() {
                this.getDetail()
            },
            // 立即购买
            onBuyClicked(){
                this.show = false
            },
            handle(){
                this.showFrom = true
            },
            // 提交商品修改
            onSubmit(values){
                let that = this
                values.id = this.goods_id
                if (values.share_money_min >  values.share_money_max){
                    vant.Notify({ type: 'danger', message: '分享金额的最小值不能大于最大值',duration:1000 });
                    return false;
                }

                axios.post("{:url('goods/goods_edit_save')}",values).then(function (res) {
                    let ret = res.data
                    console.log(ret)
                    if (ret.code == 0){
                        that.showFrom = false
                        vant.Notify({ type: 'danger', message: ret.msg,duration:1000,onClose:function () {
                                that.showFrom = false
                                that.getDetail()
                            } });
                    }else{
                        vant.Notify({ type: 'danger', message: ret.msg,duration:1000 });
                    }
                })
            },
            // 上架下架
            downUp(){
                let that = this
                let put_on = this.info.put_on
                let msg = '';
                if (put_on == 10){
                    put_on = 20
                    msg = '上架'
                }else{
                    put_on = 10
                    msg = '下架'
                }
                vant.Dialog.confirm({
                    title:'提示',
                    message:'确定要下架商品吗？'
                }).then(()=>{
                    axios.post("{:url('goods/goods_edit_save')}",{
                        id:that.info.id,
                        put_on:put_on
                    }).then(function (res) {
                        let ret = res.data
                        if (ret.code == 0){
                            vant.Notify({ type: 'success', message: ret.msg,duration:1000,onClose:function () {
                                    that.getDetail()
                                } });
                        }else{
                            vant.Notify({ type: 'danger', message: ret.msg,duration:1000 });
                        }
                    })
                })
            }
        },
    })
</script>
</body>
</html>
